<template>

    <el-dialog :title="id == null ? '添加' : '编辑'" :visible.sync="dialogVisible">

      <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="80px" label-position="left" :inline="false" style="width: 400px;">

        <template v-if="id != null">

          <el-form-item label="ID" size="mini">
            <span>{{data.id}}</span>
          </el-form-item>
          
          <el-form-item label="商户名称" size="mini">
            <span>{{data.mchName}}</span>
          </el-form-item>

          <el-form-item label="商户号" size="mini">
            <span>{{data.mchNo}}</span>
          </el-form-item>

          <el-form-item label="用户名" size="mini">
            <span>{{data.username}}</span>
          </el-form-item>

          <el-form-item label="昵称" size="mini">
            <span>{{data.nick}}</span>
          </el-form-item>

          <el-form-item label="真实姓名" size="mini">
            <span>{{data.realName}}</span>
          </el-form-item>

        </template>

        <template v-if="mainQuery.resetPassword || id == null">
          <el-form-item label="密码" size="mini" prop="password">
            <el-input placeholder="" type="password" v-model="mainQuery.password" @keyup.enter.native="submit" :disabled="loading" clearable></el-input>
          </el-form-item>
          <el-form-item label="确认密码" size="mini" prop="password_confirmation">
            <el-input placeholder="" type="password" v-model="mainQuery.password_confirmation" @keyup.enter.native="submit" :disabled="loading" clearable></el-input>
          </el-form-item>
        </template>

        <el-form-item size="mini" v-if="id != null">
          <el-button v-if="!mainQuery.resetPassword" @click="mainQuery.resetPassword = true" type="warning" :disabled="loading">重置密码</el-button>
          <el-button v-else @click="mainQuery.resetPassword = false" :disabled="loading">取消</el-button>
        </el-form-item> 

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
      </div>
    </el-dialog>

</template>

<script>

import ApiMain from '@/api/merchant.member';

export default {
  mixins: [
  ],
  props: [
    'statusOptions',
  ],
  data () {
    return {

      dialogVisible   : false,
      popDeleteVisible: false,
      loading         : false,


      mainQueryRaw: null,
      mainQuery: {
        resetPassword  : false,
        password       : '',
        password_confirmation: '',
      },

      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],

        password_confirmation: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== this.mainQuery.password) {
                callback(new Error('两次输入密码不一致'));
              }
              else {
                callback();
              }
            }, 
            trigger: 'blur' 
          },
        ],
      },

      id  : null,
      data: null,
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (data) {

      this.reset();

      if (!!data) {
        this.data = data;
        this.id = data.id;
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;
    },

    async fetchData () {

      try {
        var re = await ApiMain.info({id: this.id});
        this.data = re; 
      } catch (err) {
        this.data = null;
      }

      this.mainQuery.name = this.data.name;
      this.mainQuery.status   = this.data.status;
    },

    verifyForm () {

      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        this.id ? await this.submitSet() : await this.submitAdd();
      } catch (err) {}

      this.loading = false;
    },

    async submitAdd () {
        await ApiMain.add(this.mainQuery);
        this.$message({message: '添加成功', type: 'success'});
        this.close();
    },

    async submitSet () {
      var req = Object.copy(this.mainQuery);
      req.id = this.id;

      await ApiMain.set(req);
      this.$message({message: '修改成功', type: 'success'});
      this.close();
    },

    async submitDel () {
      this.popDeleteVisible = false;
      this.loading          = true;

      try {
        await ApiMain.del({id: this.id});
        this.$message({message: '删除成功', type: 'success'});
        this.close();
      } catch(e) {
      }

      this.loading = false;
    },
  }
}
</script>

<style>

</style>
